<template>
	<div class="Certification">
		<v-header></v-header>
		<div class="div-box">
			<div class="div-box-icon">
				<i class="icon iconfont" style="font-size: 3.5rem;margin-right: 15px;">&#xe601;</i>
			</div>
			<div class="div-box-content">
				<div class="div-box-content-title">
					<p>中国大陆身份证</p>
					<mt-button size="small" type="primary" plain>未认证</mt-button>
				</div>
				<p class="div-box-content-min-title">适用于大多数中国大陆用户</p>
			</div>
		</div>
		<mt-field label="姓 名" placeholder="请输入姓名" v-model="name"></mt-field>
		<mt-field label="身份证号码" placeholder="请输入身份证号码" v-model="userCard"></mt-field>
		<div id="button-box" class="button-box">
			<mt-button type="default" size="large" @click.native="submitSure">确 认</mt-button>
		</div>
	</div>
</template>
<style>
	.Certification{margin-top: 4rem;}
	.Certification .div-box{ width: 100%; height: 100px;margin: 3rem 10px 10px 3rem; display: flex; box-sizing: border-box; text-align:left;}
	.Certification .div-box .div-box-icon{line-height: 100px;}
	.Certification .div-box .div-box-content{padding-top: 25px;}
	.Certification .div-box .div-box-content .div-box-content-title{font-size: 1.5rem;font-weight: 700;display: flex; box-sizing: border-box; text-align:left;}
	.Certification .div-box .div-box-content .div-box-content-title p{margin-right: 10px;}
	.Certification .div-box .div-box-content .div-box-content-min-title{color: #656565;margin-top: 10px;}
	.mint-button--default.is-plain {border: 1px solid #007AFF;}
	.mint-button--primary.is-plain{font-size: 1.0rem;}
	.mint-button--small {height: 20px;padding:0 5px;margin-top: 4px;}
	.mint-button--default {background-color: #cecece;}
	.button-box{padding: 10px;margin-top:20px;}
    .mint-button {font-size: 1.3rem;}
	
</style>
<script>
	import router from './../../router';
	import util from './../../js/util/util.js';
	import vHeader from './../common/Header.vue';
	import { Cell ,Toast } from 'mint-ui';
	export default {
		data() {
			return {
				userData: {},
				memberId:'',
				name: '',
				userCard: ''
			}
		},
		created() {
			this.$store.state.headings = this.$router.history.current.name; //修改标题
			this.$store.state.isFooterShow = false; //显示底部导航
		},
		components: {
			vHeader,
			Toast,
			Cell
		},
		methods: {
			submitSure: function() { //确认
				let memberId = this.memberId;
				let name = this.name;
				let userCard = this.userCard;
				if(!name || name.length == 0) {
					this.$toast('请输入姓名！')
					return false;
				}
				if(!userCard || userCard.length == 0) {
					this.$toast('请输入身份证号码！')
					return false;
				}
				if(util.authIdCard(userCard)){
					this.$toast('请输入合法的身份证号码！')
					return false;
				}
				util.Ajax('/userCentered/autherMemberInfo', "POST", {
					"id": memberId,
					"realName": name,
					"identityCard": userCard,
					"idcardImg": ""
				}, function(data) { //成功
					if(data) {
						if(data.code == "0") {
							Toast("保存成功");
							//上传图片
							//不允许修改，隐藏按钮
							document.getElementById("button-box").style.display = "none";
						} else {
							Toast(data.msg);
						}
					}
				})
			}

		},
		mounted: function() { //加载完成后执行
			var $this = this;
			util.Ajax('/userCentered/getMemeberById', "POST", {}, function(data) { //成功
				if(data) {
					if(data.code == "0") {
						//赋值
						$this.userData = data.member;
						$this.memberId = data.member.id;
						$this.name = data.member.realName;
						$this.userCard = data.member.identityCard;
						
						if(!util.isEmpty(data.member.identityCard)&& !util.isEmpty(data.member.realName)){
							document.getElementById("button-box").style.display = "none";
						}
					} else {
						Toast(data.msg);
					}
				}
			})
		}
	}
</script>